<style scoped>
    #page-win-record{
        background: #f2f2f2;
    }

    #page-win-record .w-nav {
        background-color: #f7f7f7;
        height: 36px;
        display: -webkit-box;
        display: box;
        font-size:.12rem !important;
    }

    #page-win-record .m-simpleHeader .ico{
        margin-top:.1rem;
        vertical-align: top;
    }

    .v-buyRecord-list{
        width:calc(100% - .25rem);
        padding:.05rem .125rem 0 .125rem;
        margin:0 0 .05rem 0;
    }

    .v-buyRecord-container{
        position: relative;
        width:100%;
        height:1.34rem;
        display: flex;
        flex-direction: row;
    }

    .v-buyRecord-list-imgBox{
        width: .71rem;
        height:calc(100% - .2rem);
        padding:0 .1rem .2rem .1rem;

        border-bottom:1px solid #e3e3e3;

    }

    .v-buyRecord-list-imgBox img{
        object-fit: contain;
        object-position: center center;
        width:100%;
        height:100%;
        vertical-align: top;
    }

    .v-buyRecord-list-info{
        border-bottom:1px solid #e3e3e3;
        padding-bottom:.2rem;
        width:calc(100% - .91rem);
        height:calc(100% - .2rem);
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        font-size:.13rem;
    }

    .font12{
        font-size:.12rem !important;
    }

    .v-buyRecord-reBuyStatus{
        height:.25rem;
        display:flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .v-buyRecord-reBuyStatus .reBuyStatus-progress{
        width:calc(100% - .77rem);
        display: flex;
        flex-direction: column;
        justify-content: space-between;

    }

    .v-buyRecord-reBuyStatus .reBuyStatus-progress li{
        width:100%;
    }


    .v-buyRecord-reBuyStatus .reBuyStatus-progress li:nth-child(1){
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .v-buyRecord-reBuyStatus .reBuyStatus-progress .v-progressBar{
        display: block;
        border-radius:.1rem;
        background: #dedede;
        height:.06rem;
    }

    .v-buyRecord-reBuyStatus .reBuyStatus-progress .v-progressBar span{
        display: block;
        height:100%;
        border-radius:inherit;

    }

    .v-buyRecord-btn{
        display: block;
        border-radius:.05rem;
        border:1px solid #ef3737;
        width:.62rem;
        text-align: center;
        line-height:.25rem;
    }

    .v-buyRecord-personalInfo{
        width:100%;
        font-size:.12rem;
        height: .36rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }



    .v-winRecord-btn{
        display: inline-block;
        padding:.03rem .1rem;
        border-radius:.05rem;
        text-align: center;
    }


    .v-winRecord-ico-next{
        display: inline-block;
        position: absolute;
        top:0;
        right: .2rem;
        width:.4rem;
        height:100%;
    }

    .v-winRecord-ico-next:before{
        content:'';
        position: absolute;
        display: inline-block;
        width: .08rem;
        height: .08rem;
        border: .02rem solid #949494;
        border-width: 0 .02rem .02rem 0;
        transform: rotate(-45deg);
        top:50%;
        left: 50%;
    }
</style>
<template>
    <div id="page-win-record" class="page-wrap page-user">
        <div class="m-user">
            <header-component keep-alive :page-name="pageName"></header-component>
            <div class="m-user-duobaoRecord">
                <ul class="w-goodsList w-goodsList-l m-user-goodsList" id="winRecordList">
                    <li class="background_12 v-buyRecord-list" v-for="(k,i) in data">
                        <div class="v-buyRecord-container">
                            <div class="v-buyRecord-list-imgBox" >
                                <a href="javascript:;" v-link="{path:'/detail',query:{id:i.goodsid}}" data-href="?c=detail&amp;id={{goodsid}}"><img :src="i.goodsimg"/> </a>
                            </div>
                            <div class="v-buyRecord-list-info">
                                <p class="color_6"><a class="color_6" href="javascript:;" data-href="?c=detail&amp;id={{goodsid}}" v-link="{path:'/detail',query:{id:i.goodsid}}">{{i.goodsname}}</a></p>
                                <p class="color_8 font12">期号：{{i.periodsNo}}</p>
                                <p class="color_8 font12">总需：{{i.totalNeed}}</p>
                                <p class="color_8 font12">幸运号码：<em class="color_13">{{i.luckyNumber}}</em></p>
                                <p class="color_8 font12">揭晓时间：{{i.endTime}}</p>
                            </div>
                            <a href="javascript:;" class="v-winRecord-ico-next" data-href="?c=winDetail&amp;id={{goodsid}}"  v-link="{path:'/winDetail',query:{id:i.goodsid}}"></a>
                        </div>

                        <div class="v-buyRecord-personalInfo">
                            <span class="color_5">
                                本期参与：{{i.buyNumber}}人次
                            </span>
                            <template v-if="!!i.is_virtual">
                                <template v-if="!!i.receiver">
                                    <template v-if="!!i.sureShare">
                                        <a href="javascript:;" class="v-winRecord-btn background_13 color_12" data-href="?c=shareEdit&amp;id={{goodsid}}"  v-link="{path:'/shareEdit',query:{id:i.goodsid}}">晒单分享拿积分</a>
                                    </template>
                                    <template v-if="!!i.areadyShare">
                                        <span class="color_5">商品状态：<em class="txt-suc">{{i.deliveryStatus}}</em></span>
                                    </template>
                                </template>

                                <template v-else>
                                    <a href="javascript:;" id="prizeLingQu" class="v-winRecord-btn background_13 color_12" :data-goodsid="i.goodsid" @click="getGift">领取奖品</a>
                                </template>

                            </template>

                            <template v-else>

                                <span class="color_5" v-if="!!i.deliveryStatus">商品状态：<em class="txt-suc">{{i.deliveryStatus}}</em></span>
                                <a v-if="i.sureShare" href="javascript:;" class="v-winRecord-btn background_13 color_12" data-href="?c=shareEdit&amp;id={{goodsid}}" v-link="{path:'/shareEdit',query:{id:i.goodsid}}">晒单分享拿积分</a>

                            </template>
                        </div>
                    </li>
                </ul>

                <div class="w-more" id="winRecordMore" v-el:win-record-more>
                    <template v-if="!hasMore&&data.length>0">
                        没有更多了
                    </template>
                    <template v-if="hasMore">
                        <b class="ico ico-loading"></b> 努力加载中
                    </template>
                    <template v-if="!hasMore&&data.length<0">
                        暂无记录
                    </template>
                </div>
            </div>
        </div>
    </div>
    <pop :status-pop="statusPop" :status-toast="statusToast" :msg="msg" :delay="delay">
        <a href="javascript:;" v-link="{path:'/login'}">确定</a>
    </pop>
</template>
<script>
    import headerComponent from '../components/header'
    import User from '../module/user'
    import pop from '../components/pop'
//    import Config from '../config/config'

    module.exports = {
        data() {
            return {
                data:[],
                pageName:'中奖纪录',
                page: 1,
                limit: 10,
                hasMore: true,
                loading: false,
                statusPop:false,
                statusToast:false,
                msg:'',
                delay:2000,
            }
        },
        components: {
            headerComponent,

            pop
        },
        created(){
            this.$dispatch('isLoading', true);
        },
        async ready() {
            if(!User.isLogin){
                this.$router.go({path:'/login'});
                return;
            }

            await this.loadMore();
            document.addEventListener('scroll',this.getMore,false);
            this.$dispatch('isLoading', false);
        },
        beforeDestroy() {
            document.removeEventListener('scroll',this.getMore,false);

        },
        methods: {
            async getMore(){

                var pos = this.$els.winRecordMore.getBoundingClientRect();

                if (this.hasMore &&
                        ((pos.top> 0 && window.innerHeight - pos.top> 0) ||
                        (pos.top <= 0 && pos.bottom >= 0))) {
                    await this.loadMore();

                }
            },
            async loadMore(){

                if (this.loading) {

                    return;

                }

                this.loading=true;

                let data = await User.getWinRecord(this.page);

                if(data.status==200&&!!data.data&&!!data.data.item&&data.data.item.length > 0){

                    this.page++;

                    this.data.push(...data.data.item);

                    if(data.data.item.length < 10){

                        this.hasMore=false;
                    }

                }else if(data.status == 403){

                    this.statusPop=true;

                    this.msg='登录失效,请重新登录'

                }else{

                    this.hasMore=false;

                }

                this.loading = false;
            },
            getGift(e){

                let prizeGoodsid = e.target.dataset.goodsid;

                window.location.href = Config.apiDomain+'/Auto/receive?token='+User.token+'&id='+prizeGoodsid;

            }
        }
    }
</script>
